import React, { useState, useEffect } from "react";
import { StyleSheet, Text, View, TextInput } from "react-native";
import { Dropdown } from "react-native-element-dropdown";
import queryApi from "../api/query";

const OpinionsLocations = ({ selectLocation }) => {
  const [cityData, setCityData] = useState([]);
  const [areaData, setAreaData] = useState([]);
  const [city, setCity] = useState("");
  const [area, setArea] = useState("");
  const [iscFocus, setIscFocus] = useState(false);
  const [isaFocus, setIsaFocus] = useState(false);

  useEffect(async () => {
    await handeleCity("61");
  }, []);

  const handeleCity = async (provinceCode) => {
    let cityArray = [];
    try {
      let city = await queryApi.get("location/cities?code=" + provinceCode);
      console.log("获取陕西省所有市成功---", city.data.status);
      cityArray = city.data.data;
    } catch (error) {
      console.log("获取陕西省所有市失败---", error);
    }
    setCityData(cityArray);
    setAreaData([]);
  };

  const handeleArea = async (cityCode) => {
    let areaArray = [];
    try {
      let area = await queryApi.get("location/areas?code=" + cityCode);
      console.log("获取所有县成功---", area.data.status);
      areaArray = area.data.data;
    } catch (error) {
      console.log("获取所有县失败---");
    }
    setAreaData(areaArray);
  };

  return (
    <View
      style={{
        backgroundColor: "#fff",
        // padding: 10,
        borderRadius: 15,
        flexDirection: "row",
        marginTop: 5,
      }}
    >
      <Dropdown
        style={[styles.dropdown, iscFocus && { borderColor: "#FBB764" }]}
        placeholderStyle={styles.placeholderStyle}
        selectedTextStyle={styles.selectedTextStyle}
        inputSearchStyle={styles.inputSearchStyle}
        iconStyle={styles.iconStyle}
        containerStyle={{ marginTop: -10 }}
        data={cityData}
        search
        maxHeight={300}
        labelField="name"
        valueField="code"
        placeholder={!iscFocus ? "请选择市" : "..."}
        searchPlaceholder="Search..."
        value={city}
        onFocus={() => setIscFocus(true)}
        onBlur={() => setIscFocus(false)}
        onChange={(item) => {
          setCity(item.code);
          setArea("");
          handeleArea(item.code);
          setIscFocus(false);
          selectLocation(1, item.code);
          console.log("市", item.code, "县", area);
        }}
      />
      <Dropdown
        style={[styles.dropdown, isaFocus && { borderColor: "#FBB764" }]}
        placeholderStyle={styles.placeholderStyle}
        selectedTextStyle={styles.selectedTextStyle}
        inputSearchStyle={styles.inputSearchStyle}
        iconStyle={styles.iconStyle}
        containerStyle={{ marginTop: -10 }}
        data={areaData}
        search
        maxHeight={300}
        labelField="name"
        valueField="code"
        placeholder={!isaFocus ? "请选择区" : "..."}
        searchPlaceholder="Search..."
        value={area}
        onFocus={() => setIsaFocus(true)}
        onBlur={() => setIsaFocus(false)}
        onChange={(item) => {
          setArea(item.code);
          // handeleStreet(item.code);
          setIsaFocus(false);
          selectLocation(2, item.code);
          console.log("市", city, "县", item.code);
        }}
      />
    </View>
  );
};

export default OpinionsLocations;

const styles = StyleSheet.create({
  dropdown: {
    width: 130,
    height: 25,
    marginRight: 10,
    borderColor: "gray",
    borderWidth: 0.5,
    borderRadius: 8,
    paddingHorizontal: 10,
    marginBottom: 5,
  },
  icon: {
    marginRight: 5,
  },
  label: {
    position: "absolute",
    backgroundColor: "white",
    left: 22,
    top: 8,
    zIndex: 999,
    paddingHorizontal: 8,
    fontSize: 14,
  },
  placeholderStyle: {
    fontSize: 16,
  },
  selectedTextStyle: {
    fontSize: 16,
  },
  iconStyle: {
    width: 20,
    height: 20,
  },
  inputSearchStyle: {
    height: 40,
    fontSize: 16,
  },
  subtitle: {
    fontSize: 16,
  },
});
